<template>
    <div class="page-container">
        <h1 class="page-title">请选择床位</h1>
        <div class="bed-container">
            <template v-if="loading">
                <div class="loading-container">
                    <el-skeleton :rows="3" animated />
                </div>
            </template>
            <template v-else-if="error">
                <div class="error-container">
                    <el-empty description="加载失败">
                        <template #description>
                            <p>{{ error }}</p>
                        </template>
                        <el-button type="primary" @click="getPatient">重试</el-button>
                    </el-empty>
                </div>
            </template>
            <template v-else-if="list.length === 0">
                <div class="empty-container">
                    <el-empty description="暂无床位信息" />
                </div>
            </template>
            <template v-else>
                <div class="bed-grid">
                    <el-button
                        v-for="patient in list"
                        :key="patient.id"
                        class="bed-button"
                        :class="{ 'occupied': patient.name !== '未知' }"
                        @click="toSummaryTwo(patient)"
                    >
                        <div class="bed-info">
                            <span class="ward">{{ patient.WardCode }}房间</span>
                            <span class="bed">{{ patient.BedCode }}床</span>
                            <span class="name" :class="{ 'empty': patient.name === '未知' }">
                                {{ patient.name }}
                            </span>
                        </div>
                    </el-button>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import http from '@/api/http';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

interface Patient {
    id: number;
    patientCode: string;
    name: string;
    WardCode: string;
    BedCode: string;
}

const router = useRouter();
const list = ref<Patient[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);

const toSummaryTwo = (patient: Patient) => {
    router.push({
        path: "/SummaryTwo",
        query: {
            number: patient.patientCode,
            name: patient.name,
            patientCode: patient.patientCode
        }
    });
};

const getPatient = async () => {
    loading.value = true;
    error.value = null;
    
    try {
        const res = await http.get("/api/DoctorManage/GetPatients");
        
        // Assuming http.js might return the data directly, check both possibilities
        const patientData = res.data && res.data.data ? res.data.data : res.data;

        if (Array.isArray(patientData)) {
            list.value = patientData.map((patient:any) => ({
                ...patient,
                WardCode: patient.wardCode || '未知',
                BedCode: patient.bedCode || '未知',
                name: patient.name || '未知',
                patientCode: patient.patientCode || ''
            }));
        } else {
            // Log the unexpected data structure for debugging
            console.error('Unexpected data structure:', patientData);
            throw new Error('数据格式错误或为空');
        }
    } catch (err) {
        error.value = '获取床位信息失败，请稍后重试';
        ElMessage.error('获取床位信息失败');
        console.error('获取床位信息失败:', err);
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    getPatient();
});
</script>

<style scoped>
.page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.page-title {
    text-align: center;
    color: #303133;
    font-size: 28px;
    font-weight: 600;
    margin: 40px 0;
}

.bed-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.bed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 10px;
}

.bed-button {
    width: 100%;
    height: 80px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 10px;
}

.bed-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-color: #409eff;
}

.bed-button.occupied {
    border-color: #67c23a;
}

.bed-button.occupied:hover {
    border-color: #67c23a;
    background-color: #f0f9eb;
}

.bed-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ward {
    color: #409eff;
    font-size: 16px;
    font-weight: 500;
}

.bed {
    color: #606266;
    font-size: 14px;
}

.name {
    color: #303133;
    font-size: 14px;
    margin-top: 4px;
}

.name.empty {
    color: #909399;
    font-style: italic;
}

.loading-container,
.error-container,
.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 20px;
}

.error-container {
    flex-direction: column;
    gap: 16px;
}

.error-container p {
    color: #f56c6c;
    margin: 0;
}

:deep(.el-skeleton) {
    width: 100%;
    max-width: 800px;
}

:deep(.el-empty) {
    padding: 40px 0;
}

@media screen and (max-width: 1200px) {
    .bed-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .bed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .bed-grid {
        grid-template-columns: 1fr;
    }
}
</style>